<template>
  <div class="home_dj_header">
    <template v-if="rhPlate === 'ZC'">
      <HeaderZC />
    </template>
    <template v-if="rhPlate === 'ZX'">
      <HeaderZX />
    </template>
    <template v-if="rhPlate === 'ZB'">
      <HeaderZB />
    </template>
    <template v-if="rhPlate === 'ZS'">
      <div class="home_dj_header">
        <div><HeaderZS :titleData = titleData /></div>
        <div><HeaderZS :pilotPreachList = pilotPreachList /></div>
      </div>
    </template>
  </div>
</template>

<script>
import HeaderZB from "./HeaderZB.vue"
import HeaderZC from "./HeaderZC.vue"
import HeaderZS from "./HeaderZS.vue"
import HeaderZX  from "./HeaderZX.vue"
import {mapState} from "vuex";
import API from "@/api/api-chat-list";

export default {
  name: "homeDJHeader",
  data() {
    return {
      titleData: {},
      pilotPreachList: {},
    }
  },
  components: {
    HeaderZB,
    HeaderZC,
    HeaderZS,
    HeaderZX,
  },
  async created() {
    [this.titleData, this.pilotPreachList] = await Promise.all([
      API.queryPc(),
      API.getPilotPreach()
    ]);
  },
  computed: {
    ...mapState(['robotInfo','rhPlate']),
  }
}
</script>
